<template>
  <div class="func-comp-form">

    <ComponentGlobalSettingForm :id="id" :compConfigData="compConfigData"></ComponentGlobalSettingForm>

    <Tabs name="main_tabs" size="small" v-model="mainTabsValue">
      <TabPane name="main_tab" tab="main_tabs" label="主配置">

        <Tabs name="main_tabs_child">
          <TabPane tab="main_tabs_child" label="基础配置">

            <Collapse value="0">
              <Panel>
                常规配置
                <div slot="content">
                  <Form :label-width="100">
                    <FormItem label="类型">
                      <Select :transfer="true" size="small" v-model="chartOption.axisType">
                        <Option v-for="item in $PnChartDict.axisTypes" :value="item.value" :key="item.value">{{ item.label }}</Option>
                      </Select>
                    </FormItem>
                    <FormItem label="摆放方向">
                      <Select :transfer="true" size="small" v-model="chartOption.orient">
                        <Option v-for="item in orients" :value="item.value" :key="item.value">{{ item.label }}</Option>
                      </Select>
                    </FormItem>
                    <FormItem label="默认选中索引值">
                      <InputNumber size="small" :max="1000" :min="0" v-model="chartOption.currentIndex"></InputNumber>
                    </FormItem>
                    <FormItem label="自动播放">
                      <Tooltip content="请在预览模式或发布模式下查看播放效果" placement="top">
                        <i-switch v-model="chartOption.autoPlay">
                          <span slot="open"></span>
                          <span slot="close"></span>
                        </i-switch>
                      </Tooltip>
                    </FormItem>
                    <FormItem label="是否反向播放">
                      <i-switch v-model="chartOption.rewind">
                        <span slot="open"></span>
                        <span slot="close"></span>
                      </i-switch>
                    </FormItem>
                    <FormItem label="循环播放">
                      <i-switch v-model="chartOption.loop">
                        <span slot="open"></span>
                        <span slot="close"></span>
                      </i-switch>
                    </FormItem>
                    <FormItem label="播放时间间隔">
                      <InputNumber size="small" :max="10000000" :min="1000" :step="1000" v-model="chartOption.playInterval"></InputNumber> 毫秒
                    </FormItem>

                    <FormItem label="左边距">
                      <InputNumber size="small" :max="1000" :min="0" v-model="chartOption.left"></InputNumber>
                    </FormItem>
                    <FormItem label="右边距">
                      <InputNumber size="small" :max="1000" :min="0" v-model="chartOption.right"></InputNumber>
                    </FormItem>

                  </Form>
                </div>
              </Panel>
              <Panel>
                节点默认状态样式
                <div slot="content">
                  <Form :label-width="100">
                    <FormItem label="形状">
                      <Select :transfer="true" size="small" v-model="chartOption.symbol">
                        <Option v-for="item in $PnChartDict.symbols" :value="item.value" :key="item.value">{{ item.label }}</Option>
                      </Select>
                    </FormItem>
                    <FormItem label="大小">
                      <InputNumber size="small" :max="1000" :min="0" v-model="chartOption.symbolSize"></InputNumber>
                    </FormItem>
                    <FormItem label="颜色">
                      <PnColorPicker size="small" v-model="chartOption.itemStyle.color" alpha recommend/>
                    </FormItem>
                    <FormItem label="边框颜色">
                      <PnColorPicker size="small" v-model="chartOption.itemStyle.borderColor" alpha recommend/>
                    </FormItem>
                    <FormItem label="边框大小">
                      <InputNumber size="small" :max="1000" :min="0" v-model="chartOption.itemStyle.borderWidth"></InputNumber>
                    </FormItem>
                    <FormItem label="边框类型">
                      <Select :transfer="true" size="small" v-model="chartOption.itemStyle.borderType">
                        <Option v-for="item in lineTypes" :value="item.value" :key="item.value">{{ item.label }}</Option>
                      </Select>
                    </FormItem>
                    <FormItem label="阴影大小">
                      <InputNumber size="small" :max="1000" :min="0" v-model="chartOption.itemStyle.shadowBlur"></InputNumber>
                    </FormItem>
                    <FormItem label="阴影颜色">
                      <PnColorPicker size="small" v-model="chartOption.itemStyle.shadowColor" alpha recommend/>
                    </FormItem>
                    <FormItem label="透明度">
                      <InputNumber size="small" :max="1" :min="0" :step="0.1" v-model="chartOption.itemStyle.opacity"></InputNumber>
                    </FormItem>

                  </Form>
                </div>
              </Panel>
              <Panel>
                节点被选中状态样式
                <div slot="content">
                  <Form :label-width="100">
                    <FormItem label="形状">
                      <Select :transfer="true" size="small" v-model="chartOption.checkpointStyle.symbol">
                        <Option v-for="item in $PnChartDict.symbols" :value="item.value" :key="item.value">{{ item.label }}</Option>
                      </Select>
                    </FormItem>
                    <FormItem label="大小">
                      <InputNumber size="small" :max="1000" :min="0" v-model="chartOption.checkpointStyle.symbolSize"></InputNumber>
                    </FormItem>
                    <FormItem label="颜色">
                      <PnColorPicker size="small" v-model="chartOption.checkpointStyle.color" alpha recommend/>
                    </FormItem>
                    <FormItem label="边框大小">
                      <InputNumber size="small" :max="1000" :min="0" v-model="chartOption.checkpointStyle.borderWidth"></InputNumber>
                    </FormItem>
                    <FormItem label="边框颜色">
                      <PnColorPicker size="small" v-model="chartOption.checkpointStyle.borderColor" alpha recommend/>
                    </FormItem>
                  </Form>
                </div>
              </Panel>
              <Panel>
                节点被鼠标滑入时样式
                <div slot="content">
                  <Form :label-width="100">
                    <FormItem label="颜色">
                      <PnColorPicker size="small" v-model="chartOption.emphasis.itemStyle.color" alpha recommend/>
                    </FormItem>
                    <FormItem label="边框大小">
                      <InputNumber size="small" :max="1000" :min="0" v-model="chartOption.emphasis.itemStyle.borderWidth"></InputNumber>
                    </FormItem>
                    <FormItem label="边框颜色">
                      <PnColorPicker size="small" v-model="chartOption.emphasis.itemStyle.borderColor" alpha recommend/>
                    </FormItem>
                    <FormItem label="边框类型">
                      <Select :transfer="true" size="small" v-model="chartOption.emphasis.itemStyle.borderType">
                        <Option v-for="item in lineTypes" :value="item.value" :key="item.value">{{ item.label }}</Option>
                      </Select>
                    </FormItem>
                    <FormItem label="阴影大小">
                      <InputNumber size="small" :max="1000" :min="0" v-model="chartOption.emphasis.itemStyle.shadowBlur"></InputNumber>
                    </FormItem>
                    <FormItem label="阴影颜色">
                      <PnColorPicker size="small" v-model="chartOption.emphasis.itemStyle.shadowColor" alpha recommend/>
                    </FormItem>
                  </Form>
                </div>
              </Panel>
              <Panel>
                标签
                <div slot="content">
                  <Form :label-width="100">
                    <FormItem label="显示">
                      <i-switch v-model="chartOption.label.show">
                        <span slot="open"></span>
                        <span slot="close"></span>
                      </i-switch>
                    </FormItem>
                    <FormItem label="位置">
                      <Select :transfer="true" size="small" v-model="chartOption.label.position">
                        <Option v-for="item in positions" :value="item.value" :key="item.value">{{ item.label }}</Option>
                      </Select>
                    </FormItem>
                    <FormItem label="旋转">
                      <InputNumber size="small" :max="360" :min="0" v-model="chartOption.label.rotate"></InputNumber>
                    </FormItem>
                    <FormItemPanel title="名称标签">
                      <FormItem label="颜色">
                        <PnColorPicker size="small" v-model="chartOption.label.top.color" alpha recommend/>
                      </FormItem>
                      <FormItem label="字体大小">
                        <InputNumber size="small" :max="1000" :min="1" v-model="chartOption.label.top.fontSize"></InputNumber>
                      </FormItem>
                      <FormItem label="行高">
                        <InputNumber size="small" :max="1000" :min="0" :step="10" v-model="chartOption.label.top.lineHeight"></InputNumber>
                      </FormItem>
                    </FormItemPanel>
                    <FormItemPanel title="值标签">
                      <FormItem label="颜色">
                        <PnColorPicker size="small" v-model="chartOption.label.bottom.color" alpha recommend/>
                      </FormItem>
                      <FormItem label="字体大小">
                        <InputNumber size="small" :max="1000" :min="1" v-model="chartOption.label.bottom.fontSize"></InputNumber>
                      </FormItem>
<!--                      <FormItem label="行高">
                        <InputNumber size="small" :max="1000" :min="0" :step="10" v-model="chartOption.label.bottom.lineHeight"></InputNumber>
                      </FormItem>-->
                    </FormItemPanel>

                  </Form>
                </div>
              </Panel>
              <Panel>
                轴线样式
                <div slot="content">
                  <Form :label-width="100">
                    <FormItem label="显示">
                      <i-switch v-model="chartOption.lineStyle.show">
                        <span slot="open"></span>
                        <span slot="close"></span>
                      </i-switch>
                    </FormItem>
                    <FormItem label="颜色">
                      <PnColorPicker size="small" v-model="chartOption.lineStyle.color" alpha recommend/>
                    </FormItem>
                    <FormItem label="粗细">
                      <InputNumber size="small" :max="1000" :min="0" :step="0.1" v-model="chartOption.lineStyle.width"></InputNumber>
                    </FormItem>
                    <FormItem label="线类型">
                      <Select :transfer="true" size="small" v-model="chartOption.lineStyle.type">
                        <Option v-for="item in lineTypes" :value="item.value" :key="item.value">{{ item.label }}</Option>
                      </Select>
                    </FormItem>
                    <FormItem label="阴影大小">
                      <InputNumber size="small" :max="1000" :min="0" v-model="chartOption.lineStyle.shadowBlur"></InputNumber>
                    </FormItem>
                    <FormItem label="阴影颜色">
                      <PnColorPicker size="small" v-model="chartOption.lineStyle.shadowColor" alpha recommend/>
                    </FormItem>
                    <FormItem label="透明度">
                      <InputNumber size="small" :max="1" :min="0" :step="0.1" v-model="chartOption.lineStyle.opacity"></InputNumber>
                    </FormItem>

                  </Form>
                </div>
              </Panel>
              <Panel>
                控制按钮
                <div slot="content">
                  <Form :label-width="100">
                    <FormItem label="显示">
                      <i-switch v-model="chartOption.controlStyle.show">
                        <span slot="open"></span>
                        <span slot="close"></span>
                      </i-switch>
                    </FormItem>
                    <FormItem label="显示播放按钮">
                      <i-switch v-model="chartOption.controlStyle.showPlayBtn">
                        <span slot="open"></span>
                        <span slot="close"></span>
                      </i-switch>
                    </FormItem>
                    <FormItem label="播放按钮位置">
                      <Select :transfer="true" size="small" v-model="chartOption.controlPosition">
                        <Option v-for="item in controlPositions" :value="item.value" :key="item.value">{{ item.label }}</Option>
                      </Select>
                    </FormItem>
                    <FormItem label="显示上一项按钮">
                      <i-switch v-model="chartOption.controlStyle.showPrevBtn">
                        <span slot="open"></span>
                        <span slot="close"></span>
                      </i-switch>
                    </FormItem>
                    <FormItem label="显示下一项按钮">
                      <i-switch v-model="chartOption.controlStyle.showNextBtn">
                        <span slot="open"></span>
                        <span slot="close"></span>
                      </i-switch>
                    </FormItem>
                    <FormItem label="按钮尺寸">
                      <InputNumber size="small" :max="1000" :min="0" v-model="chartOption.controlStyle.itemSize"></InputNumber>
                    </FormItem>
                    <FormItem label="按钮间距">
                      <InputNumber size="small" :max="1000" :min="0" v-model="chartOption.controlStyle.itemGap"></InputNumber> px
                    </FormItem>
                    <FormItem label="颜色">
                      <PnColorPicker size="small" v-model="chartOption.controlStyle.color" alpha recommend/>
                    </FormItem>
                    <FormItem label="边框大小">
                      <InputNumber size="small" :max="1000" :min="0" v-model="chartOption.controlStyle.borderWidth"></InputNumber>
                    </FormItem>
                    <FormItem label="边框颜色">
                      <PnColorPicker size="small" v-model="chartOption.controlStyle.borderColor" alpha recommend/>
                    </FormItem>
                  </Form>
                </div>
              </Panel>
            </Collapse>

          </TabPane>
          <!--<TabPane tab="main_tabs_child" label="...">

          </TabPane>-->
        </Tabs>

      </TabPane>
      <TabPane name="datasource_tab" tab="main_tabs" label="数据源">
        <DatasourceState v-if="mainTabsValue == 'datasource_tab'" targetComp="TimelineComp"></DatasourceState>
      </TabPane>
      <TabPane name="interaction_tab" tab="main_tabs" label="交互">
        <Container v-if="mainTabsValue == 'interaction_tab'">
          <CustomJsDocument></CustomJsDocument>
          <FormItemPanel title="初始化运行脚本">
            <CodeEditor v-model="customGlobalJsCode"></CodeEditor>
          </FormItemPanel>

          <FormItemPanel title="值改变时运行脚本">
            <InteractionSender :interactionKey="'itemChange'"></InteractionSender>
            <Alert style="padding: 5px;">此脚本中，使用_this指向当前组件vm实例，通过value可获取选中值</Alert>
            <CodeEditor v-model="timelineChangeJsCode"></CodeEditor>
          </FormItemPanel>
        </Container>
      </TabPane>
    </Tabs>

  </div>
</template>

<script>

  import FuncCompFormMixin from '@/mixin/FuncCompFormMixin'

  import { createHelpers } from 'vuex-map-fields';

  const { mapFields } = createHelpers({
    getterType: 'designer/getLayoutItem',
    mutationType: 'designer/updateLayoutItem',
  });

  export default {
    name: 'TimelineCompForm', // 此名称必须填写，且必须与组件文件名相同，并且必须加上Form字符
    mixins: [FuncCompFormMixin],
    data() {
      return {
        orients: [
          {label: '横向', value: 'horizontal'},
          {label: '纵向', value: 'vertical'}
        ],
        controlPositions: [
          {label: '左边', value: 'left'},
          {label: '右边', value: 'right'}
        ],
        lineTypes: [
          {label: '实线', value: 'solid'},
          {label: '虚线', value: 'dashed'},
          {label: '点线', value: 'dotted'}
        ],
        positions: [
          {label: '自动', value: 'auto'},
          {label: '左边', value: 'left'},
          {label: '右边', value: 'right'},
          {label: '上边', value: 'top'},
          {label: '下边', value: 'bottom'}
        ]
      }
    },
    mounted() {

    },
    methods: {

    },
    computed: {
      ...mapFields({

        chartOption: 'component.compConfigData.chartOption',
        timelineChangeJsCode: 'component.compConfigData.timelineChangeJsCode'

      })
    }
  }
</script>

<style scoped>

</style>
